const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');

// 注意：这里使用了node的语法，向外暴露了一个配置对象
// 因为webpack这个构建工具，底层是使用node.js开发的
module.exports = {
    mode: "development",
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
    plugins: [
        new htmlWebpackPlugin({ // 创建一个把html首页托管到内存中的插件
            template: path.resolve(__dirname, './src/index.html'),
            filename: "index.html"
        }),
        new VueLoaderPlugin()
    ],
    module: {   // 用来配置非JS文件对应的loader的
        rules: [    // 就是这些非JS文件和loader之间的对应关系
            { test: /\.css$/, use: ["style-loader", "css-loader"] },                    // css文件的loader匹配规则
            { test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"] },    // less文件的loader匹配规则
            { test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"] },    // scss文件的loader匹配规则
            // 样式表中图片的loader匹配规则
            // 可使用?给url-loader传参，其中有一个固定的参数为limit，表示图片的大小，需要给定一个数值
            // limit给定的这个数值，是图片的大小，单位是Byte（字节）
            // 如果指定了limit参数，则只有图片的大小小于或者等于给定的值时，才会转为base64格式的图片；否则就不转换
            { test: /\.jpg|png|gif|bmp$/, use: 'url-loader?limit=8192&name=[hash:8]-[name].[ext]&esModule=false' },
            { test: /\.js$/, use: "babel-loader", exclude: /node_modules/ },
            { test: /\.vue/, use: "vue-loader" },               // 解析Vue组件的第三方loader
            { test: /\.ttf|woff|woff2|eot|svg$/, use: 'url-loader' }        // 处理样式中字体文件路径的问题
        ]
    }
};